<template>
  <div>
    <n-card :bordered="false" class="mt-4 proCard">
      <n-grid cols="2" responsive="screen">
        <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
          <n-form
            :label-width="90"
            :model="formValue"
            :rules="rules"
            label-placement="top"
            ref="formRef"
            class="py-8"
          >
            <n-form-item label="名称" path="title">
              <n-input v-model:value="formValue.title" placeholder="输入名称" />
            </n-form-item>
            <n-form-item label="企业名称" path="company_name">
              <n-input v-model:value="formValue.company_name" placeholder="企业名称" />
            </n-form-item>
            <n-form-item label="职位描述" path="description">
              <n-input v-model:value="formValue.description" placeholder="职位描述" />
            </n-form-item>
            <n-form-item label="所属部门" path="department">
              <n-input v-model:value="formValue.department" placeholder="所属部门" />
            </n-form-item>
            <n-form-item label="最低薪资" path="salary_min">
              <n-input-number v-model:value="formValue.salary_min" placeholder="最低薪资" />
            </n-form-item>
            <n-form-item label="最高薪资" path="salary_max">
              <n-input-number v-model:value="formValue.salary_max" placeholder="最高薪资" />
            </n-form-item>
            <n-form-item label="薪资类型" path="salary_type">
              <n-radio-group v-model:value="formValue.salary_type" name="salary_type">
                <n-space>
                  <n-radio value="月薪">月薪</n-radio>
                  <n-radio value="年薪">年薪</n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>
            <n-form-item label="工作地点" path="location">
              <n-input v-model:value="formValue.location" placeholder="工作地点" />
            </n-form-item>
            <n-form-item label="工作经验要求" path="experience">
              <n-radio-group v-model:value="formValue.experience" name="experience">
                <n-space>
                  <n-radio value="不限">不限</n-radio>
                  <n-radio value="1-3年">1-3年</n-radio>
                  <n-radio value="3-5年">3-5年</n-radio>
                  <n-radio value="5-10年">5-10年</n-radio>
                  <n-radio value="10年以上">10年以上</n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>
            <n-form-item label="学历要求" path="education">
              <n-radio-group v-model:value="formValue.education" name="education">
                <n-space>
                  <n-radio value="不限">不限</n-radio>
                  <n-radio value="高中">高中</n-radio>
                  <n-radio value="专科">专科</n-radio>
                  <n-radio value="本科">本科</n-radio>
                  <n-radio value="研究生">研究生</n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>
            <n-form-item label="职位状态" path="status">
              <n-radio-group v-model:value="formValue.status" name="status">
                <n-space>
                  <n-radio value="开放">开放</n-radio>
                  <n-radio value="关闭">关闭</n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>
            <n-form-item label="截止日期" path="deadline">
              <n-date-picker type="date" v-model:value="formValue.deadline" />
            </n-form-item>
            <div style="margin-left: 80px">
              <n-space>
                <n-button type="primary" @click="formSubmit">提交</n-button>
                <n-button @click="resetForm">重置</n-button>
              </n-space>
            </div>
          </n-form>
        </n-grid-item>
      </n-grid>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, unref, reactive, onMounted } from 'vue';
  import { useMessage } from 'naive-ui';
  import { ResultEnum } from '@/enums/httpEnum';
  import { useRouter } from 'vue-router';
  import { getHireInfo, patchHire, putHire } from '@/api/hire/hire';

  const id: any = ref(useRouter().currentRoute.value.params.id);
  const rules = {
    title: {
      required: true,
      message: '请输入资料名称',
      trigger: 'blur',
    },
  };

  const formRef: any = ref(null);
  const message = useMessage();

  const defaultValueRef = () => ({
    id: 0,
    title: '',
    company_name: '',
    description: '',
    department: '',
    salary_min: 0,
    salary_max: 0,
    salary_type: '月薪',
    location: '',
    experience: '',
    education: '',
    status: '',
    deadline: null,
  });

  let formValue = reactive(defaultValueRef());

  const getData = async () => {
    const response: any = await getHireInfo(formValue.id);
    if (response.code === ResultEnum.SUCCESS) {
      Object.assign(formValue, response.data);
    }
  };

  function formSubmit() {
    formRef.value.validate(async (errors) => {
      if (!errors) {
        try {
          let response: any = null;
          if (formValue.id == 0) {
            response = await putHire(formValue);
          } else {
            response = await patchHire(formValue);
          }
          if (response.code === ResultEnum.SUCCESS) {
            Object.assign(formValue, response.data);
            message.success('操作成功');
          }
        } finally {
          // loading.value = false;
        }
      } else {
        message.error('验证失败，请填写完整信息');
      }
    });
  }

  function resetForm() {
    formRef.value.restoreValidation();
    formValue = Object.assign(unref(formValue), defaultValueRef());
  }

  onMounted(() => {
    formValue.id = id.value;
    if (formValue.id != 0) {
      getData();
    }
  });
</script>

<style lang="less">
  .ql-toolbar.ql-snow {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #eee;
    margin-top: -10px;
  }

  .ql-container.ql-snow {
    border: none;
  }
</style>
